<script setup>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { getAppSetting, setAppSetting } from '../tauriApi';
import { renderComboForDisplay, isValidCombo, canonicalizeCombo } from '../assets/hotkeys';

const props = defineProps({
  defaults: { type: Object, default: () => ({}) },
});
const emit = defineEmits(['updated']);
const { t } = useI18n();

const loading = ref(false);
const message = ref('');
const map = ref({});

const actionMeta = [
  { key: 'toggle-ai', label: () => t('hotkeys.toggle_ai') },
  { key: 'toggle-main', label: () => t('hotkeys.toggle_main') },
  { key: 'open-settings', label: () => t('hotkeys.open_settings') },
  { key: 'refresh-ai', label: () => t('hotkeys.refresh_ai') },
  { key: 'focus-input', label: () => t('hotkeys.focus_input') },
  { key: 'open-devtools', label: () => t('hotkeys.open_devtools') },
  // file operations (shown in settings list)
  { key: 'file:save', label: () => t('menu.save') },
  { key: 'file:saveAs', label: () => t('menu.save_as') },
  { key: 'file:saveAll', label: () => t('menu.save_all') },
  { key: 'file:close', label: () => t('menu.close_editor') },
];

async function load() {
  loading.value = true;
  message.value = '';
  try {
    const raw = await getAppSetting('hotkeys');
    let parsed = {};
    if (raw) {
      try { parsed = JSON.parse(raw); } catch {}
    }
    map.value = { ...props.defaults, ...parsed };
  } catch (e) {
    message.value = String(e);
  } finally {
    loading.value = false;
  }
}

async function save() {
  loading.value = true;
  message.value = '';
  try {
    const canon = {};
    for (const k of Object.keys(map.value || {})) canon[k] = canonicalizeCombo(map.value[k]);
    await setAppSetting('hotkeys', JSON.stringify(canon));
    message.value = t('hotkeys.saved');
    emit('updated');
  } catch (e) {
    message.value = String(e);
  } finally {
    loading.value = false;
  }
}

function resetDefaults() {
  map.value = { ...props.defaults };
}

onMounted(load);
</script>

<template>
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
    <div class="mb-3 flex items-baseline justify-between gap-3">
      <div class="flex items-baseline gap-3">
        <h3 class="text-base font-semibold">{{ t('hotkeys.title') }}</h3>
        <span class="text-xs text-slate-500 dark:text-neutral-400">{{ t('hotkeys.placeholder') }}</span>
      </div>
      <div class="flex items-center gap-2">
        <button class="h-8 rounded-md bg-indigo-600 px-3 text-xs text-white transition hover:bg-indigo-500 disabled:opacity-50" :disabled="loading" @click="save">{{ loading ? t('hotkeys.saving') : t('hotkeys.save') }}</button>
        <button class="h-8 rounded-md border border-slate-200 bg-white px-3 text-xs hover:bg-slate-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700" @click="resetDefaults">{{ t('hotkeys.reset') }}</button>
        <span class="text-xs text-slate-500 dark:text-neutral-400">{{ message }}</span>
      </div>
    </div>
    <div class="overflow-hidden rounded-md border border-slate-200 dark:border-neutral-800">
      <div class="grid grid-cols-[260px_1fr_80px] items-center gap-2 border-b bg-slate-50 px-3 py-2 text-[11px] text-slate-500 dark:border-neutral-800 dark:bg-neutral-800/40 dark:text-neutral-400">
        <div>{{ t('hotkeys.command') }}</div>
        <div>{{ t('hotkeys.keybinding') }}</div>
        <div class="text-right">{{ t('hotkeys.reset_row') }}</div>
      </div>
      <div v-for="a in actionMeta" :key="a.key" class="grid grid-cols-[260px_1fr_80px] items-center gap-2 px-3 py-2 border-b last:border-b-0 dark:border-neutral-800">
        <div class="text-xs text-slate-700 dark:text-neutral-300">{{ a.label() }}</div>
        <div class="flex items-center gap-2">
          <input class="h-8 flex-1 rounded-md border bg-white px-3 text-xs dark:border-neutral-700 dark:bg-neutral-800"
                 v-model="map[a.key]" :placeholder="t('hotkeys.placeholder')" />
          <span class="text-[11px] text-slate-400 dark:text-neutral-500">{{ renderComboForDisplay(map[a.key]) }}</span>
          <span v-if="map[a.key] && !isValidCombo(map[a.key])" class="text-[11px] text-red-500">!</span>
        </div>
        <div class="text-right">
          <button class="h-7 rounded-md border border-slate-200 bg-white px-2 text-[11px] hover:bg-slate-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700"
                  @click="map[a.key] = props.defaults[a.key] || ''">{{ t('hotkeys.reset_row') }}</button>
        </div>
      </div>
    </div>
  </div>
</template>


